<template>
	<custom-layout custom-class="custom-layout">
		<!-- 轮播图 -->
		<wd-swiper :list="swiperList" customClass="swiper-class" :loop="false" :autoplay="false" v-model:current="current" @click="handleGoTo" @change="handleSwiperChange"/>
		<image src="/static/image/case/vr.png" mode="aspectFit" v-if="isVr" class="vr"></image>
		<!-- tabbar -->
		<image src="/static/image/case/vr-selected.png" mode="aspectFit" class="swiper-img" v-if="isVr" @click="handleSwiperTypeChange('vr')"></image>
		<image src="/static/image/case/image-selected.png" mode="aspectFit" class="swiper-img" v-else @click="handleSwiperTypeChange('image')"></image>
		<!-- 楼盘信息 -->
		<view class="information">
			<view class="property-name">{{caseDetails.title}} | {{dictionaryStore.analysis('case_style',caseDetails.style)}}</view>
			<view class="focus">
				<view class="focus-item">
					{{caseDetails.forwardCount}}<text class="text">转发</text>
				</view>
				<view class="focus-item">
					{{caseDetails.seeCount}}<text class="text">查看</text>
				</view>
			</view>
			<view class="description">
				<image src="/static/image/index-grid/estate.png" mode="aspectFit" class="estate"></image>
				<view class="description-item">{{propertyList.find(item=>item.id===caseDetails.propertyName)?.name}} |
				{{dictionaryStore.analysis('area',caseDetails.houseArea)}} |
				{{dictionaryStore.analysis('decoration_order_house_type',caseDetails.houseType)}}</view>
				
			</view>
		</view>
		<!-- 设计师卡片 -->
		<wd-card custom-class="card">
			<view class="designer">
				<!-- 头像 -->
				<image :src="caseDetails.designerAvatar" mode="aspectFill" class="designer-avatar"></image>
				<!-- 详细信息 -->
				<view class="designer-content">
					<!-- 名字电话 -->
					<view class="designer-info">
						<view class="designer-info-name">
							<view>{{caseDetails.designerName}}</view>
							<view class="designer-tag">设计总监</view>
						</view>
						<image src="/static/image/case/phone.png" mode="aspectFit" class="designer-info-phone" @click="handleCallPhone(caseDetails.designerPhone)"></image>
					</view>
					<view class="tag-style">
						<view class="tag-item">
							<view class="title">
								个人能力
							</view>
							<view class="text">
								{{caseDetails.designerTags?caseDetails.designerTags.join(','):''}}
							</view>
						</view>
						<view class="tag-item">
							<view class="title">
								擅长风格
							</view>
							<view class="text">
								{{caseDetails.designerStyle?caseDetails.designerStyle.join(','):''}}
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</wd-card>
		<!-- 客厅 -->
		<view class="fileList" v-for="_ in caseDetails.vrFileUrl" :key="_.space">
			<view class="fileList-title">
				<view class="dot">
					—
				</view>
				<view class="title">
					{{_.space}}
				</view>
				<view class="dot">
					—
				</view>
			</view>
			<view class="" v-for="image in _.fileUrlList">
				<image :src="image.url" mode="aspectFit" class="fileList-img"></image>
			</view>
		</view>
		<view  style="height: 123rpx;width: 100%;"></view>
		<!-- 聊天 -->
		<wd-fab  :expandable="false">
			<template #trigger>
				<image src="/static/image/case/vx-chat.png" mode="aspectFit" class="button-img" @click="handleCopyWxCode(caseDetails.designerWxCode)"></image>
				<image src="/static/image/case/contact-designer.png" mode="aspectFit" class="button-img" @click="handleCallPhone(caseDetails.designerPhone)"></image>
			</template>
		</wd-fab>
		
	</custom-layout>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useDictionaryStore,
	} from '@/store/index.js'
	import {
		getCaseInfo
	} from '@/api/case/details.js'
	import {
		getPropertyList
	} from '@/api/case/index.js'
	
	// 字典仓库
	const dictionaryStore = useDictionaryStore()
	// 案例详情数据
	const caseDetails = ref({})
	//  案例详情id
	const id = ref()
	// 楼盘列表
	const propertyList = ref([])
	// 获取楼盘列表
	const handleGetPropertyList = () => {
		const params = {
			pageSize: -1
		}
		getPropertyList(params).then((data) => {
			propertyList.value = data.list
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
		})
	}
	// 轮播图列表
	const swiperList = ref([])
	// vr效果图
	const vrFileList = ref([])
	// 图片施工
	const engineeringFileList = ref([])
	// 是否vr
	const isVr = ref(true)
	// 处理获取案例详情
	const handleGetCaseDetail = () => {
		handleGetPropertyList()
		const params = {
			id:id.value
		}
		getCaseInfo(params).then((data) => {
			
			  if (data.vrFileUrls&&data.vrFileUrls.length>0) {
			    const groupedData = data.vrFileUrls.reduce((acc, item) => {
			      if (!acc[item.space]) {
			        acc[item.space] = [];
			      }
			      acc[item.space].push({ url: item.fileUrl });
			      return acc;
			    }, {});
			    // 转换为目标结构
			    data.vrFileUrl = Object.keys(groupedData).map(space => ({
			        space,
			        fileUrlList: groupedData[space]
			    }));
			  }
			  caseDetails.value = data
			  vrFileList.value = data.vrFileUrls.map(item=> item.fileUrl)
			  engineeringFileList.value = data.engineeringFileUrl.map(item=> item.url)
			  swiperList.value = [...vrFileList.value,...engineeringFileList.value]
			  // 判断是否有vr图片
			  if(data.vrFileUrls&&data.vrFileUrls.length>0) {
				  isVr.value = true
			  } else {
				  isVr.value = false
			  }
			
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
			
		})
	}
	onLoad((option)=>{
		id.value = option.id
			
	})
	onShow(() => {
		handleGetCaseDetail()
	})	
	// 处理拨打电话
	const handleCallPhone = (phoneNumber) => {
		uni.makePhoneCall({
			phoneNumber
		})
	}
	// 处理复制微信号码
	const handleCopyWxCode = (data) => {
		uni.setClipboardData({
			data,
			success: () => {
				uni.hideToast();
				uni.showModal({
					title:'提示',
					content:'复制设计师微信号成功',
					confirmText:'确定',
					showCancel:false
					
				})
			}
		})
	}
	// 点击到第vr展示页面
	const handleGoTo = (e) => {
		if(e.index>=vrFileList.value.length) return
		uni.navigateTo({
			url:`/pages/case/allPhoto/index?initialIndex=${e.index}&panoramaList=${encodeURIComponent(JSON.stringify(caseDetails.value.vrFileUrls))}`
		})
	}
	// 轮播图切换
	const handleSwiperChange = (e) => {
		console.log(e,'e');
		if(e.current>=vrFileList.value.length) {
			isVr.value = false
		} else {
			isVr.value = true
		}
	}
	const current = ref(0)
	// 轮播图底部类型切换
	const handleSwiperTypeChange = (type) => {
		if(vrFileList.value.length==0) {
			uni.showToast({
				title:'暂无VR效果图',
				icon:'error'
			})
			return
		}
		isVr.value =!isVr.value
		if(type=='vr') {
			current.value =vrFileList.value.length
		} else {
			current.value = 0
		}
		
	}
</script>

<style lang="scss" scoped>
	// 自定义布局
	:deep(.custom-layout) {
		background: #F8F8F8;
	}
	.vr {
		position: absolute;
		top: 130rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 150rpx;
		height: 150rpx;
		pointer-events: none;//点击穿透
	}
	.swiper-img {
		position: absolute;
		top: 300rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 280rpx;
		height: 120rpx;
	}
	// 楼盘信息
	.information {
		padding: 40rpx 30rpx;
		.property-name {
			font-size: 40rpx;
			font-weight: bold;
		}
		.focus {
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			font-size: 34rpx;
			display: flex;
			.focus-item {
				margin-right: 20rpx;
				.text {
					margin-left: 8rpx;
					font-size: 22rpx;
					color: #b5b5b5;
				}
			}
		}
		.description {
			display: flex;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			.estate {
				width: 50rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			.description-item {
				color: #b5b5b5;
			}
			
		}
	}
	.designer {
		display: flex;
		.designer-avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			
		}
		.designer-content {
			flex: 1;
			.designer-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.designer-info-name {
					color: #333;
					font-size: 36rpx;
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					.designer-tag {
						color: white;
						background-color: #cea972;
						border-radius: 20rpx;
						padding: 4rpx 10rpx;
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}
				.designer-info-phone {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
		.tag-style {
			.tag-item {
				display: flex;
				font-size: 24rpx;
				.title {
					color: #333;
					margin-right: 10rpx;
				}
				
			}
		}
		
	}
	.fileList {
		padding: 40rpx 30rpx;
		padding-top: 0;
		.fileList-title {
			display: flex;
			justify-content: center;
			align-items: center;
			.dot {
				color: #6a9cff;
				font-weight: bold;
			}
			.title {
				font-size: 34rpx;
				margin: 10rpx;
			}
		}
		.fileList-img {
			width: 100%;
			height: 300rpx;
			margin-top: 10rpx;
		}
		
	}
	.button-img {
		width: 253rpx;
		height: 123rpx;
	}
	
	// 轮播图样式
	:deep(.swiper-class) {
		.wd-swiper__track {
			border-radius: 0;
		}
	}
	:deep(.wd-card__title-content) {
		padding-top: 4px !important;
	}
	:deep(.wd-card__footer) {
		padding-bottom: 4px !important;
	}
</style>